import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { decrementCountAction, incrementCountAction, incrementAsyncCountAction } from '../../actions/countAction';

const ReduxDemo = ({
  counter, decrementCount, incrementCount, incrementAsyncCount,
}) => (
  <>
    <button type="button" onClick={() => incrementCount()}>+</button>
    <button type="button" onClick={() => decrementCount()}>-</button>
    <button type="button" onClick={() => incrementAsyncCount()}>异步+</button>
    <span>{counter.count}</span>
  </>
);

ReduxDemo.defaultProps = {
  decrementCount: (f) => f,
  incrementCount: (f) => f,
  incrementAsyncCount: (f) => f,
};


ReduxDemo.propTypes = {
  counter: PropTypes.shape({
    count: PropTypes.number.isRequired,
  }).isRequired,
  decrementCount: PropTypes.func,
  incrementCount: PropTypes.func,
  incrementAsyncCount: PropTypes.func,
};

const mapStateToProps = (state) => ({
  counter: state.counter,
});

const mapDispatchToProps = (dispatch) => ({
  incrementCount: (...args) => dispatch(incrementCountAction(...args)),
  decrementCount: (...args) => dispatch(decrementCountAction(...args)),
  incrementAsyncCount: (...args) => dispatch(incrementAsyncCountAction(...args)),
});

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(ReduxDemo);
